<template>
  <div class="liteflow-editor-setting-bar">
    <a-tabs v-model="activeTabKey" :animated="false">
      <a-tab-pane key="basic" tab="属性">
        <component
          :is="propertiesPanel"
          v-bind="currentModel ? { model: currentModel } : {}"
        />
      </a-tab-pane>
      <a-tab-pane key="outline" tab="结构树">
        <Outline />
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import { defineComponent, ref, inject, computed, onMounted, onBeforeUnmount, provide } from 'vue';
import { GRAPH_SYMBOL } from './context.js';
import NodeOperator from '../core/model/el/node-operator.js';
import Basic from './settings/Basic.vue';
import ComponentPropertiesEditor from './settings/ComponentPropertiesEditor.vue';
import ConditionPropertiesEditor from './settings/ConditionPropertiesEditor.vue';
import Outline from './settings/Outline.vue';

export default defineComponent({
  name: 'SettingBar',
  components: {
    Basic,
    ComponentPropertiesEditor,
    ConditionPropertiesEditor,
    Outline,
  },
  setup() {
    const { flowGraph } = inject(GRAPH_SYMBOL);
    const selectedModel = ref(null);
    const activeTabKey = ref('basic');

    // 提供 flowGraph 给子组件
    provide('flowGraph', flowGraph);

    const handleSelect = (model) => {
      console.log('[SettingBar] model:select 事件, 模型:', model);
      console.log('[SettingBar] flowGraph:', flowGraph.value);
      console.log('[SettingBar] flowGraph 是否有 on 方法:', typeof flowGraph.value?.on);
      selectedModel.value = model;
    };

    const handleForceUpdate = () => {
      console.log('[SettingBar] settingBar:forceUpdate 事件');
      selectedModel.value = null;
    };

    const handleSelectionChanged = () => {
      console.log('[SettingBar] selection:changed 事件');
      selectedModel.value = null;
    };

    // 计算当前选中的模型
    const currentModel = computed(() => {
      if (selectedModel.value) {
        return selectedModel.value.proxy || selectedModel.value;
      }
      
      const nodes = flowGraph.value?.getSelectedCells().filter((v) => !v.isEdge());
      if (nodes && nodes.length === 1) {
        const model = nodes[0].getData().model;
        return model?.proxy || model;
      }
      
      return null;
    });

    // 计算当前应该显示的组件
    const propertiesPanel = computed(() => {
      const model = currentModel.value;
      
      // 如果没有选中模型或没有 parent，显示 Basic
      if (!model || !model.parent) {
        return 'Basic';
      }
      
      // 判断是 NodeOperator 还是其他类型
      if (Object.getPrototypeOf(model) === NodeOperator.prototype) {
        return 'ComponentPropertiesEditor';
      } else {
        return 'ConditionPropertiesEditor';
      }
    });

    onMounted(() => {
      if (flowGraph.value) {
        flowGraph.value.on('model:select', handleSelect);
        flowGraph.value.on('settingBar:forceUpdate', handleForceUpdate);
        flowGraph.value.on('selection:changed', handleSelectionChanged);
      }
    });

    onBeforeUnmount(() => {
      if (flowGraph.value) {
        flowGraph.value.off('model:select', handleSelect);
        flowGraph.value.off('settingBar:forceUpdate', handleForceUpdate);
        flowGraph.value.off('selection:changed', handleSelectionChanged);
      }
    });

    return {
      propertiesPanel,
      currentModel,
      activeTabKey,
    };
  },
});
</script>
<style lang="less" scoped>
.liteflow-editor-setting-bar {
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
}

:deep(.ant-tabs) {
  flex: 1;
  display: flex;
  flex-direction: column;
}

:deep(.ant-tabs-content) {
  flex: 1;
  overflow: auto;
}

:deep(.ant-tabs-tabpane) {
  height: 100%;
  min-height: 300px;
}

:deep(.ant-tabs-tabpane-active) {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
}

:deep(.ant-tabs-tabpane-inactive) {
  display: none !important;
}
</style>
